<template>
  <div>
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="配置" size="70%" :withHeader="false"
      :visible.sync="innerDrawer"  >
    <div style="position: relative;margin-bottom: 20px;">
      <div class="drawerTitle" style="background-color:#409eff !important;padding: 13px 15px;">
        <span>规则配置</span>
        <div class="close" @click="handleClose" style="top: 12px;">
          <i class="el-icon-close" style="font-size: 22px;" />
        </div>
      </div>
    </div>
      <div v-if="!alldata" class="headers">
        <el-form :inline="true" :model="formData" class="demo-form-inline">
          <el-form-item label="发放时间">
            <el-input
              v-model="formData.node_day"
              placeholder="请输入"
            ><template slot="prepend">T+</template>
            </el-input>
          </el-form-item>
          <el-form-item label="时间节点">
            <el-select v-model="formData.node_type" placeholder="请选择">
              <el-option label="支付成功" :value="1"></el-option>
              <el-option label="确认收货" :value="2"></el-option>
              <el-option label="评价" :value="3"></el-option>
              <el-option label="过售后期" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="奖励规则">
            <el-select v-model="formData.award_type" placeholder="请选择">
              <el-option label="按支付金额发放比例" :value="1"></el-option>
              <el-option label="按商品利润发放比例" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="奖励类型">
            <el-select v-model="formData.level" placeholder="请选择">
              <el-option label="仅直推" :value="1"></el-option>
              <el-option label="直推和间推" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div style="padding:20px">
        <el-form
          ref="allocationform"
          :model="formData"
          :rules="formRules"
          inline
        >
          <el-table
            :data="formData.goods_rule"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
            }"   >

            <el-table-column label="订单区间(0代表无穷大)" align="center" width="320">
              <template slot-scope="scope">
                <div style="display:flex;align-items: center;margin-bottom:12px;">
                  <el-input-number v-model="scope.row.range_start" controls-position="right"
                    :min="elInputNumberMin(scope.$index)"></el-input-number>
                  <span style="margin:0 5px 0;">--</span>
                  <el-input-number v-model="scope.row.range_end" controls-position="right"
                    :min="0"></el-input-number>
                  <span style="margin-left:5px;">单</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="奖励次数" align="center">
              <template slot-scope="scope">
                  <el-form-item :prop="`goods_rule.${scope.$index}.range_num`" >
                    <el-input
                      size="mini"
                      style="width: 100px"
                      controls-position="right"
                      v-model.number="scope.row.range_num"
                      label=""
                    ></el-input>
                  </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="直推奖励" align="center">
            <el-table-column label="送积分" align="center">
              <template slot-scope="scope">
                  <el-form-item  :prop="`goods_rule.${scope.$index}.level_type_1.integral_num`" :rules="formRules.moneynumber">
                    <el-input
                      size="mini"
                      style="width: 100px"
                      controls-position="right"
                      v-model="scope.row.level_type_1.integral_num"
                      label=""
                    ></el-input>
                  </el-form-item>
              </template>
            </el-table-column>
            </el-table-column>
            <el-table-column label="间推奖励" align="center">
                <el-table-column label="送积分" align="center">
              <template slot-scope="scope">
                  <el-form-item  :prop="`goods_rule.${scope.$index}.level_type_2.integral_num`" :rules="formRules.moneynumber">
                    <el-input
                      size="mini"
                      style="width: 100px"
                      controls-position="right"
                      v-model="scope.row.level_type_2.integral_num"
                      label=""
                    ></el-input>
                  </el-form-item>
              </template>
            </el-table-column>
            </el-table-column>
          </el-table>
        </el-form>
        <el-row style="margin-top:30px;">
          <el-col :span="19">
            <el-button @click="addhang" type="success">增加配置行</el-button>
          </el-col>
          <el-col :span="5" style="text-align: right;">
            <el-button type="primary" @click="subaddallcation()" style="width: 80px">保存</el-button>
            <el-button type="warning" @click="restting()" style="width: 80px">重置</el-button>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: [
    "alldata",
  ],
  components: {},
  data() {
    return {
      onedata:'',
      formData: {
        goods_id: '', //商品id
        node_day: 1, //发放节点时间（T+N）
        node_type: 1, //奖励发放节点：1=支付成功；2=确认收货；3=评价；4=过售后期
        award_type: 1, //奖励规则（1=按支付金额发放比例；2=按商品利润发放比例）
        level: 1, //分销层级（1=仅直推；2=直推和间推）
        goods_rule: [{
            range_start: 1,
            range_end: 0,
            range_num: 0,
            level_type_1:{
                level_type:1,
                integral_num:0
            },
            level_type_2:{
                level_type:2,
                integral_num:0
            }
        }],
      },
      formRules: {
        moneynumber: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?%?$/;
              let regex = /%/;
              if(regex.test(value)){
                let jsx = /^\d+(\.\d{1,2})?%?$/;
                if(jsx.test(value)){
                  callback();
                }else{
                  callback(new Error("最多两位正小数"));
                }
              }else{
                if (req.test(value)) {
                  if (Number(value) > 999999) {
                    return callback(new Error("数值不能大于999999"));
                  }
                  callback();
                } else {
                  callback(new Error("保留两位小数"));
                }
              }

            },
            trigger: "change",
          }],
      },
      innerDrawer: true,

    };
  },
  mounted() {
    if( this.alldata.length > 0){
     this.formData.goods_rule = this.alldata
    }
  },
  methods: {
    subaddallcation(){
      this.$refs.allocationform.validate((valid) => {
          if (valid) {
            if(this.alldata){

            let list = this.formData.goods_rule
            let tmp = {};
            for (let i in list) {
              //检测是否是最后一个值
              if (i == list.length - 1) {
                if (list[i].range_end > 0) {
                  if(list[i].range_end < list[i].range_start){
                    this.$messages.error('最后一条结束区间不得大于开始区间');
                    return
                  }
                }
              }else{
                tmp = list[i];
                if(list[i].range_end == 0){
                  this.$messages.error('中间的结束区间不能为0（无穷大）');
                  return
                }
                if (tmp.range_start) {
                  if (list[Number(i) + 1].range_start <= tmp.range_end) {
                    this.$messages.error('开始区间不能小于等于上一个结束区间');
                    return false;
                  }
                }
              }
            }

            this.onedata = this.formData.goods_rule
            this.$emit('childtoparent', this.onedata);
            this.$parent.closeaddproduct();
            this.$message({
            message: "配置成功",
            type: "success",
          });
            }else{
            this.$emit('addsutaddpro',  this.formData);
            this.$parent.closeaddproduct();
            this.$message({
            message: "配置成功",
            type: "success",
          });


            }




        }
      })

    },
    elInputNumberMin(index) {
        if (index == 0) {
          return 1;
        }
        if (this.formData.goods_rule[index - 1] == 1) {
          return Number(
            this.formData.goods_rule[index - 1].range_start + 1
          );
        } else {
          return Number(
            this.formData.goods_rule[index - 1].range_start + 1
          );
        }
      },

      //重置
      restting(){
        this.formData.goods_rule = [{
            range_start: 1,
            range_end: 0,
            range_num: 0,
            level_type_1:{
                level_type:1,
                integral_num:0
            },
            level_type_2:{
                level_type:2,
                integral_num:0
            }
        }]
      },



    // 增加配置行
    addhang(){
        this.formData.goods_rule.push({
            range_start: 0,
            range_end: 0,
            range_num: 0,
            level_type_1:{
                level_type:1,
                integral_num:0
            },
            level_type_2:{
                level_type:2,
                integral_num:0
            }
        })
    },
    handleClose(done) {
      


      this.restting()
      // 关闭后执行的操作
      this.$parent.closeaddproduct();




    },
  },
};
</script>

<style lang="scss" scoped>
.headers {
  padding: 20px;
}
</style>
